<style type="text/css">
	.blog_list_default .blog_content ul {
	    display: grid;
	    grid-row-gap: 40px;
	    grid-column-gap: 30px;
	    grid-template-columns: repeat(3, 1fr);
	}
	.blog_list_default .blog_content li {
	    text-align: center;
	    list-style-type: none;
	    overflow: hidden;
	}
	.blog_list_default .blog_content li .blog_pic {
	   width: 100%;
	   display: inline-block;
	   margin-bottom: 30px;
	}
	.blog_list_default .blog_content li .blog_pic img {
	    width: 100%;
	}

	.blog_list_default .blog_content li .blog_title {
	    display: block;
	    font-weight: bold;
	    margin-bottom: 10px;
	    color: var(--title_color);
	    font-size: var(--product_font_size);
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}

	.blog_list_default .blog_content li .blog_time {
	    color: #999;
	    margin-top: 0.8rem;
	}

	.blog_list_default .blog_content li .blog_list_detail {
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    overflow: hidden;
	    color: var(--detail_color);
	}

	.blog_list_default .blog_content li .blog_read_more {
	    display: inline-block;
	    margin-top: 10px;
	    text-decoration: underline;
	    color: #557FBF;
	}
	@media screen and (max-width: 767px) {
	    .blog_list_default .blog_content ul {
	        grid-template-columns: repeat(1, calc(100%)) !important;
	        grid-row-gap: 30px;
	    }
	   .blog_list_default .blog_content li .blog_pic {
		   margin-bottom: 20px;

		}
	}

</style>
<div class="blog_list_default container_wrapper" id="blog_list">
	<h1 class="title">{{ lang.blogs.list.news }}</h1>
	<div class="blog_content">
 {% assign length = all_blog.blogs | size %}
    {% if length %}

		<ul>
			{% for article in all_blog.blogs %}
			<li>
				<a class="blog_pic" href="/blogs/{{article.handle}}"><img data-src="{{ article.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{article.image_alt}}"></a>
				<a class="blog_title" href="/blogs/{{article.handle}}">{{article.title}}</a>
				<div class="blog_list_detail">{{article.descript}}</div>
			</li>
			{% endfor %}
		</ul>
	</div>
	{% include pagination , { paginate : paginate } %}
	{% else %}
  {% include empty ,text:lang.blogs.list.empty  %}
	{% endif %}
</div>